<template>
  <div class="alarm-center">
    <h2>
      告警中心
      <el-button type="primary" @click="navigateToDataAnalysis" style="float: right;">
        数据分析
      </el-button>
    </h2>
    <!-- 危险行为记录表格 -->
    <h3>危险行为记录</h3>
    <el-table :data="dangerousBehaviors">
      <!-- 时间列 -->
      <el-table-column prop="time" label="时间"></el-table-column>
      <!-- 地点列 -->
      <el-table-column prop="location" label="地点"></el-table-column>
      <!-- 行为列 -->
      <el-table-column prop="behavior" label="行为"></el-table-column>
      <!-- 操作列，包含审核按钮 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="reviewDangerousBehavior(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 危险人员名单表格 -->
    <h3>危险人员名单</h3>
    <el-table :data="dangerousPersons">
      <!-- 姓名列 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <!-- 身份证号列 -->
      <el-table-column prop="id_card" label="身份证号"></el-table-column>
      <!-- 风险等级列 -->
      <el-table-column prop="risk_level" label="风险等级"></el-table-column>
      <!-- 操作列，包含审核按钮 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="reviewDangerousPerson(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'AlarmCenter',
  computed: {
    dangerousBehaviors() {
      return this.$store.state.dangerousBehaviors;
    },
    dangerousPersons() {
      return this.$store.state.dangerousPersons;
    }
  },
  methods: {
    // 审核危险行为
    reviewDangerousBehavior(record) {
      this.$router.push({ name: 'reviewDangerousBehavior', params: { record } });
    },
    // 审核危险人员
    reviewDangerousPerson(record) {
      this.$router.push({ name: 'reviewDangerousPerson', params: { record } });
    },
    // 导航到数据分析页面
    navigateToDataAnalysis() {
      // 调用 actions 更新数据
      this.$store.dispatch('fetchDangerousBehaviors')
          .then(() => {
            // 调用成功后导航到数据分析页面
            this.$store.dispatch('fetchDangerousPersons')
                .then(() => {
                  this.$router.push({ name: 'dataAnalysis' });
                })
                .catch(error => {
                  console.error('Error fetching dangerous persons:', error);
                });
          })
          .catch(error => {
            console.error('Error fetching dangerous behaviors:', error);
          });
    }
  },
  created() {
    // 在组件创建时调用 actions 获取数据，确保数据初始加载
    this.$store.dispatch('fetchDangerousBehaviors')
        .catch(error => {
          console.error('Error fetching dangerous behaviors on component create:', error);
        });
    this.$store.dispatch('fetchDangerousPersons')
        .catch(error => {
          console.error('Error fetching dangerous persons on component create:', error);
        });
  }
};
</script>

<style scoped>
.alarm-center {
  padding: 20px;
}

.el-table {
  margin-bottom: 20px;
}
</style>
